<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
  <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
</head>
<body style="padding:10px;">
  <div class="tplay-body-div">
    <div style="margin-top: 20px;">
    </div>
    <div class="layui-tab">
      <ul class="layui-tab-title">
        <li class="layui-this">基本资料</li>
        <li class="layui-this">详细资料</li>
        <li>修改密码</li>
        <li>账号余额</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
              <input name="nickname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">服务中心</label>
            <div class="layui-input-inline">
              <input name="nickname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">用户等级</label>
            <div class="layui-input-inline">
              <input name="nickname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
            </div>
          </div>
        </div>
        <div class="layui-tab-item">



        </div>
        <div class="layui-tab-item">
          <div class="layui-form-item">
            <label class="layui-form-label">登录密码</label>
            <div class="layui-input-inline">
              <input name="nickname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">二级密码</label>
            <div class="layui-input-inline">
              <input name="nickname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
            </div>
          </div>
        </div>
        <div class="layui-tab-item">
          <div class="layui-form-item">
            <label class="layui-form-label">注册币</label>
            <div class="layui-input-inline">
              <input name="nickname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">现金币</label>
            <div class="layui-input-inline">
              <input name="nickname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">复投币</label>
            <div class="layui-input-inline">
              <input name="nickname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">股票</label>
            <div class="layui-input-inline">
              <input name="nickname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">股权</label>
            <div class="layui-input-inline">
              <input name="nickname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
            </div>
          </div>
        </div>

      </div>
    </div>
    <script src="__PUBLIC__/layui/layui.js"></script>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>
    <script>
        layui.use('element', function(){
            var $ = layui.jquery
                ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

            //触发事件
            var active = {
                tabAdd: function(){
                    //新增一个Tab项
                    element.tabAdd('demo', {
                        title: '新选项'+ (Math.random()*1000|0) //用于演示
                        ,content: '内容'+ (Math.random()*1000|0)
                        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                    })
                }
                ,tabDelete: function(othis){
                    //删除指定Tab项
                    element.tabDelete('demo', '44'); //删除：“商品管理”


                    othis.addClass('layui-btn-disabled');
                }
                ,tabChange: function(){
                    //切换到指定Tab项
                    element.tabChange('demo', '22'); //切换到：用户管理
                }
            };

            $('.site-demo-active').on('click', function(){
                var othis = $(this), type = othis.data('type');
                active[type] ? active[type].call(this, othis) : '';
            });

            //Hash地址的定位
            var layid = location.hash.replace(/^#test=/, '');
            element.tabChange('test', layid);

            element.on('tab(test)', function(elem){
                location.hash = 'test='+ $(this).attr('lay-id');
            });

        });
    </script>

  </div>
</body>
</html>